import React from 'react'
import ProgressView from "../../view/ProgressView";
import styles from "../../css/task.module.css";
import Config from "../../Config";
import { Common } from "../../const/imgs"
import { Actions, NameSpace } from "../../model/taskModel";
import { connect } from "react-redux";
import ShowImgList from './ShowImgs'
import { locationTo } from '../../utils/LocationUtil'
import * as locations from '../../const/locations'
import { collectRecordList } from '../../service/TaskService'
import { getTOKEN, getIDs, setInfo } from '../../utils/StorageUtil'
import { chechPics } from '../../utils/RegUtil'
import Scroll from './Bscroll/index'
import { NOTASK } from './Default'

class CollectionList extends React.Component {
  constructor(props) {
    super(props);
    this.CURRENT_PAGE = 1;
    this.PER_PAGE = 5;
    this.state = {
      collectionList: [],
      loading: false,
    }
  }
  navigate = (e) => {
    this.props.getCuijiId({
      cuijiId: e,
    })
    setInfo('cuiji', e)
    locationTo(locations.CUIJIDETAIL)
  }
  componentDidMount() {
    this.getRecordList({
      current_page: this.CURRENT_PAGE,
      per_page: this.PER_PAGE
    })
  }
  getRecordList = (params) => {
    const that = this
    this.setState({ loading: true })

    collectRecordList({
      token: getTOKEN(),
      cid: this.props.isSelf === '0' ? this.props.caseId ? this.props.caseId : getIDs().caseId : '',
      is_self: this.props.isSelf,
      ...params
    })
      .then(
        res => {
          this.setState({ loading: false })
          // var cuiji0 = res.data[0];
          this.setState({
            collectionList: [...this.state.collectionList, ...res.data],
            isShowMore: res.data.length === this.PER_PAGE,
          })
          that.CURRENT_PAGE++;
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  pullingUp = () => {

    this.getRecordList({
      current_page: this.CURRENT_PAGE,
      per_page: this.PER_PAGE
    })
  }
  render() {
    const { isShowMore, collectionList, loading } = this.state
    return (
      <div className={styles['container']} style={{ marginTop: this.props.isSelf === '1' ? '0' : '50px' }} >
        <Scroll
          ref='scroll'
          click={true}
          bounce={true}
          pullUpLoad={true}
          pullUpLoadMoreData={this.pullingUp}
          isPullUpTipHide={true}
          isShowMore={isShowMore}
        >
          <div className={styles['content1']} ref='content' >
            {collectionList.length === 0 && <NOTASK />}
            {collectionList.map((item, index) => {
              return (
                <CollectionItem key={index} navigate={this.navigate} item={item} />
              )
            })
            }
          </div>

        </Scroll>
        <ProgressView visibility={loading} mode={ProgressView.MODE_MEDIUM} />

      </div>
    )
  }
}

class CollectionItem extends React.Component {
  render() {
    const {
      navigate,
      item,
      item: {
        record_type, // 0上门催收 1电话催收 2智能云呼 3人工坐席
        result, // 催收结果
        content, //补充兼备注
        collect_addr_detail, //催收详细地址
        create_time, // 催收记录创建时间
        collector_name,  // 催客姓名
        return_meney, // 收回金额
        last_returnmoney_time, // 最后一次收回金额时间
        // phone,
      },
    } = this.props
    let iconUrl = ''
    switch (parseInt(record_type, 10)) {
      case 0:
        iconUrl = Common.SMFW;
        break;
      case 1:
        iconUrl = Common.DHFW;
        break;
      case 2:
        iconUrl = Common.ZNYH;
        break;
      case 3:
        iconUrl = Common.RGZX;
        break;
      default:
        iconUrl = Common.SMFW;
        break;
    }
    return (
      <div onClick={() => { navigate(item) }} className={styles['debt_item']} style={{ color: Config.fontColor }} >

        <div className={styles['debt_data']}>
          <div className={styles['coll_title_flex']}>
            <div style={{ display: 'block' }}>
              <span className={styles['coll_title_content']}>
                <img className={styles['coll_title_icon']} src={iconUrl} alt='' />
                {parseInt(record_type, 10) === 0 && "上门催收 "}
                {parseInt(record_type, 10) === 1 && "电话催收 "}
                {parseInt(record_type, 10) === 2 && "智能云呼 "}
                {parseInt(record_type, 10) === 3 && "人工坐席 "}
              </span>
            </div>
            <span style={{ color: Config.fontColor1, fontSize: '12px' }}>
              {create_time}
            </span>
          </div>
          <div className={styles['debt_data_list']}>
            {collector_name && <Cell title={'催客：' + collector_name} des1={result} des2={null} />}
            {return_meney !== null &&
              return_meney.split(',').map((ite, index) =>
                <Cell key={index} index={index} title='还款' des1={'还款金额：' + ite} des2={'还款时间：' + last_returnmoney_time.split(',')[index]} />
              )
            }
            <Cell title={"补充:" + content + ""} des1='' />
           <ShowImgList
              imgList={item.pic_1.split(',').map(img => { return {imgurl: img}})}
              isAll={false}
            />
            {/* <ShowImgList imgList={chechPics(item)} isAll={false} /> */}
            {collect_addr_detail && collect_addr_detail !== '' && collect_addr_detail !== 'null' && collect_addr_detail !== 'undefined' &&
              <LocationCell des2={collect_addr_detail} />
            }
          </div>
        </div>
      </div>
    )
  }
}

const Cell = ({ title, des1, des2, index }) => {
  return (
    <div className={styles['coll_item_cell']}>
      {!index > 0 && <div className={styles['coll_cell_firstline']} >
        <div className={styles['coll_cell_icon']}>
          <div className={styles['coll_cell_desc']}>
          </div>
        </div>
        <div>
          {title}
        </div>
      </div>}
      <div className={styles['coll_cell_secondline']}>
        <div className={styles['coll_cell_icon']}>
        </div>
        <div>
          {des1}
        </div>
      </div>
      <div className={styles['coll_cell_secondline']}>
        <div className={styles['coll_cell_icon']}>
        </div>
        <div>
          {des2}
        </div>
      </div>
    </div>
  )
}
const LocationCell = ({ des2 }) => {
  return (
    <div className={styles['coll_item_cell']}>
      <div className={styles['coll_cell_secondline']} style={{ alignItems: "flex-start", webkitAlignItems: "flex-start" }}>
        <div className={styles['']}>
        <div className={styles['coll_cell_iconup_wrapper']}>
          <img src={Common.DZH} alt='' />
        </div>
        </div>
        <div className={styles['coll_cell_addr']}>
          {des2}
        </div>
      </div>
    </div>
  )
}
const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};
const mapDispatchToProps = dispatch => {
  return {
    getCuijiId(item) {
      let params = {
        cuijiId: item.cuijiId
      };
      dispatch(Actions.actionCuiji(params));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(CollectionList);
// export default CollectionList;